<template>
	<view class="content">
		<view class="platform shadow">
			<view class="body">
				<view v-for="item in categoryList" :key="item.id" class="section">
					<view v-if="item.showStatus === 1" class="item-content" @click="toGoodListPage(item)">
						<img :src="item.icon" class="icon" alt=""/>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
// JS部分根据需要添加

import sheep from "@/sheep";

const props = defineProps({
	categoryList: {
		type: Array,
		default() {
		},
	},
});

function toGoodListPage(item) {
	sheep.$router.go('/pages/goods/list', {
		categoryId: item.id,
		categoryName: item.name
	});
}

</script>

<style lang="scss" scoped>
.content {
	margin-top: 20rpx;
	padding: 5rpx;

	.title {
		font-size: 20px;
	}
}

.platform {
	width: 93.5%;
	border-radius: 20rpx;
	padding: 20rpx;
}

.body {
	margin-top: 30rpx;
	display: flex;
	flex-wrap: wrap; /* 允许元素换行 */
	justify-content: space-around; /* 元素之间平均间隔 */
	align-items: center;
	gap: 20rpx; /* 调整间隔大小 */
}

.section {
	display: flex;
	flex-direction: row; /* 改为行内布局 */
	align-items: center; /* 垂直居中对齐 */
	width: 46%; /* 调整宽度以适应两列布局 */
	height: 80px; /* 高度自适应内容 */
	margin-bottom: 20rpx; /* 设置下边距以产生间隔 */
	border: 1px solid black; /* 保持边框 */
	padding: 10rpx; /* 内部间隔 */
	box-sizing: border-box; /* 包括边框和内边距在内的宽度 */
	border-radius: 10rpx;
}

.item-content {
	display: flex;
	align-items: center;
}

.icon {
	border-radius: 5px;
	box-shadow: 1px 1px 20px #eeecec;
	width: 76px; /* 调整为规定的宽度 */
	height: 54px; /* 调整为规定的高度 */
}

.name {
	font-size: 16px; /* 调整字体大小 */
	color: black; /* 字体颜色 */
	margin-left: 20rpx; /* 设置图片和文本之间的间距 */
}

</style>


